<template>
  <view class="me-container">


    <!-- 用户信息区域 -->
    <view class="user-section">
      <view class="user-info">
        <view class="user-avatar">
          <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/default-avatar.png" class="avatar-img" mode="aspectFill"></image>
        </view>
        <view class="user-details">
          <text class="user-name">{{ memberInfo.nickname }}</text>
          <text class="user-phone">{{ memberInfo.phone }}</text>
        </view>
        <view class="service-center" @click="showCustomerService">
          <text class="service-text">客服中心</text>
        </view>
      </view>
    </view>

    <!-- 余额卡片 -->
    <view class="balance-card" @click="showBalanceDetail">
      <view class="balance-content">
        <view class="balance-left">
          <text class="balance-label">我的余额</text>
        </view>
        <view class="balance-right">
          <text class="balance-amount">¥{{ memberInfo.balance }}</text>
          <view class="balance-arrow-wrapper">
            <uni-icons type="right" size="16" color="#333" class="balance-arrow"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="quick-actions">
      <view class="action-row">
        <view class="action-item" @click="goToOrders">
          <view class="action-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/ico_my1.png" class="action-icon-img"></image>
          </view>
          <view class="action-content">
            <text class="action-text">我的订单</text>
            <text class="action-desc">查看历史订单</text>
          </view>
        </view>

        <view class="action-divider"></view>

        <view class="action-item" @click="goToCars">
          <view class="action-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/ico_my2.png" class="action-icon-img"></image>
          </view>
          <view class="action-content">
            <text class="action-text">我的爱车</text>
            <text class="action-desc">查看我的爱车</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 推广横幅 -->
    <view class="promotion-banner" @click="showPromotion">
      <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/banner_little@2x.png" class="banner-image" mode="aspectFit"></image>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-item" @click="showCoupons">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list1.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">我的券包</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="menu-item" @click="showParkingCard">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list2.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">我的停车卡</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="menu-item" @click="showChargingPile">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list3.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">我的共享充电桩</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="menu-item" @click="showInvitation">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list4.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">发起邀请</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="menu-item" @click="showReceipt">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list4_1.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">开发票</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

      <view class="menu-item" @click="showSettings">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list5.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">设置</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>


      <view class="menu-item" @click="handleLogout">
        <view class="menu-left">
          <view class="menu-icon">
            <image src="https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/my_list6.png" class="menu-icon-img"></image>
          </view>
          <text class="menu-text">退出登录</text>
        </view>
        <uni-icons type="right" size="16" color="#ccc"></uni-icons>
      </view>

    </view>
    <view  v-if="showSuccessModal">
      <PublicPopup
      :visible="popupVisible"
      :topTitle="popupConfig.topTitle"
      :title="popupConfig.title"
      :description="popupConfig.description"
      :confirmText="popupConfig.confirmText"
      :cancelText="popupConfig.cancelText"
      :showCancel="popupConfig.showCancel"
      :showConfirm="popupConfig.showConfirm"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
   </view>

    <!-- 底部导航栏占位 -->
    <view class="bottom-placeholder"></view>
  </view>

  <!-- 自定义底部导航栏 -->
  <custom-tabbar :current="currentTabIndex" @change="onTabChange" @centerClick="onCenterClick"></custom-tabbar>
</template>

<script setup>
import { ref , onMounted } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

import LoginUtils from '@/utils/loginUtils.js'
import { HomeApi } from '@/api/index.js'
import CustomTabbar from '../../components/custom-tabbar/custom-tabbar.vue'
import PublicPopup from '@/components/PublicPop-up.vue'

// 响应式数据
const memberInfo = ref({
  name: '',
  phone: '',
  balance: ''
})

// 弹窗配置
const popupConfig = ref({
  topTitle: '',
  title: '退出登录',
  description: '确定要退出登录吗？',
  confirmText: '确认',
  cancelText: '取消',
  showCancel: true,
  showConfirm: true
})

// 弹窗显示状态
const showSuccessModal = ref(false)
const popupVisible = ref(false)

// 确认按钮点击事件
const handleConfirm = () => {
  popupVisible.value = false
  showSuccessModal.value = false
}

// 取消按钮点击事件
const handleCancel = () => {
  popupVisible.value = false
}

// 退出登录
const handleLogout = () => {
  showSuccessModal.value = true
  popupConfig.value = {
    topTitle: '',
    title: '确认退出',
    description: '确定要退出登录吗？',
    confirmText: '确认',
    cancelText: '取消',
    showCancel: true,
    showConfirm: true
  }
  popupVisible.value = true
}

const currentTabIndex = ref(2) // 当前在"我的"页面，索引为2

// 获取用户信息
const getMyInfo = async () => {
  try {
    const userInfo = await HomeApi.getMyInfo()
    memberInfo.value = userInfo
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 保持默认值
  }
}

// 生命周期
onMounted(() => {
  getMyInfo()
})

// 页面显示事件处理
onShow(() => {
    // uni.hideTabBar();

  // 更新自定义 tabbar 状态
  if (typeof getApp().globalData.setTabBarIndex === 'function') {
    getApp().globalData.setTabBarIndex(1)
  }
  // 微信小程序自定义 tabbar
  if (typeof wx !== 'undefined' && wx.getTabBar) {
    const tabbar = wx.getTabBar()
    if (tabbar) {
      tabbar.setData({
        selected: 1
      })
    }
  }
})



// 方法


// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

const showCustomerService = () => {
  // if (!LoginUtils.checkLoginStatus()) {
  //   goToLogin()
  //   return
  // }
  uni.navigateTo({
    url: '/pages/service/index'
  })
}

const goToOrders = () => {
    LoginUtils.checkStatusToLogin();


  uni.navigateTo({
    url: '/pages/order/list'
  })
}

const goToCars = () => {
    LoginUtils.checkStatusToLogin();

	uni.navigateTo({
		url: '/pages/vehicle/bind'
	})
}

const showPromotion = () => {
    LoginUtils.checkStatusToLogin();

  uni.navigateTo({
    url: '/pages/activity/index'
  })
}

const showCoupons = () => {
  // if (!LoginUtils.checkLoginStatus()) {
  //   goToLogin()
  //   return
  // }
 uni.navigateTo({
    url: '/pages/coupon-pack/index'
  })
}

const showParkingCard = () => {
    // LoginUtils.checkStatusToLogin();

  // uni.showModal({
  //   title: '我的停车卡',
  //   content: '停车卡功能正在开发中，敬请期待！',
  //   showCancel: false
  // })
  uni.navigateTo({
    url: '/pages/card/card'
  })
}

const showChargingPile = () => {
  // if (!LoginUtils.checkLoginStatus()) {
  //   goToLogin()
  //   return
  // }
  uni.navigateTo({
    url: '/pages/activity/shared-pile/index'
  })
}

// 底部导航栏事件处理
const onTabChange = (index) => {
  console.log('切换到tab:', index)
  if (index === 0) {
    // 跳转到首页
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}

const onCenterClick = () => {
  console.log('点击中间按钮')
  // 可以调用扫码功能
  uni.scanCode({
    success: function (res) {
      console.log('扫码结果:', res)
    }
  })
}

const showInvitation = () => {
    LoginUtils.checkStatusToLogin();

  uni.showModal({
    title: '发起邀请',
    content: '邀请功能正在开发中，敬请期待！',
    showCancel: false
  })
}

const showReceipt = () => {
    LoginUtils.checkStatusToLogin();

    uni.navigateTo({
      url: '/pages/invoice/list'
    })
  // uni.showModal({
  //   title: '开发票',
  //   content: '发票功能正在开发中，敬请期待！',
  //   showCancel: false
  // })
}

const showSettings = () => {
  // if (!LoginUtils.checkLoginStatus()) {
  //   goToLogin()
  //   return
  // }
  uni.navigateTo({
    url: '/pages/settings/index'
  })
}

// const handleLogout = () => {
//   uni.showModal({
//     title: '确认退出',
//     content: '确定要退出登录吗？',
//     success: (res) => {
//       if (res.confirm) {
//         LoginUtils.logout()
//         uni.showToast({
//           title: '已退出登录',
//           icon: 'success'
//         })
//         setTimeout(() => {
//           LoginUtils.redirectToLogin()
//         }, 1500)
//       }
//     }
//   })
// }

const showBalanceDetail = () => {
    LoginUtils.checkStatusToLogin();

  uni.navigateTo({
    url: '/pages/balance/balance'
  })
}



</script>

<style scoped>
.me-container {
  min-height: 100vh;
  background: #ffffff;
  padding-bottom: 120rpx;
}



/* 用户信息区域 */
.user-section {
  padding: 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
  margin-top: 60rpx; /* 为导航栏留出空间 */
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f0f0f0;
}

.user-details {
  flex: 1;
}

.user-name {
  display: block;
  font-size:24px;
  font-weight: 550;
  color: #333;
  margin-bottom: 8rpx;

}

.user-phone {
  font-size: 14px;
  color: #666;
}

.service-center {
  margin-top: 80rpx;
  padding-right: 24rpx;
  /* padding: 12rpx 24rpx; */
  /*background: #f8f9fa;*/
  /*border-radius: 20rpx;*/
  /*border: 1rpx solid #e9ecef;*/
}

.service-text {
  font-size: 32rpx;
  color: #00A992;
}

/* 余额卡片 */
.balance-card {
  margin: 0 40rpx 0rpx 40rpx;
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/me/balance-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20rpx 20rpx 0 0 ;
  padding: 30rpx;
  position: relative;
  overflow: hidden;
  /*box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);*/
}

.balance-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.balance-left {
  display: flex;
  flex-direction: column;
}

.balance-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.balance-arrow-wrapper {
  width: 48rpx;
  height: 48rpx;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.balance-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8rpx;
}

.balance-amount {
  font-size: 48rpx;
  font-weight: 600;
  color: #fff;
  flex: 1;
  margin-left: 20rpx;
}

.balance-arrow {
  opacity: 0.8;
}

/* 快捷操作 */
.quick-actions {
  margin: 0 20rpx 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.1);
}

.action-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.action-item {
  flex: 1;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  border-radius: 16rpx;
  transition: all 0.3s;
}

.action-item:active {
  transform: scale(0.95);
  background: #e9ecef;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
}

.action-icon-img {
  width: 72rpx;
  height: 72rpx;
}

.action-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.action-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.action-desc {
  font-size: 22rpx;
  color: #666;
}

.action-divider {
  width: 1rpx;
  height: 80rpx;
  background: #e9ecef;
}

/* 推广横幅 */
.promotion-banner {
  /*margin: 0 30rpx 20rpx 30rpx;*/
  /*border-radius: 20rpx;*/
  overflow: hidden;
  /*box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);*/
}

.banner-image {
  width: 100%;
  height: 155rpx;
}

/* 功能菜单 */
.menu-section {
  /*margin: 0 30rpx;*/
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  padding-top: 10rpx;
  /*box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);*/
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx;
  /*border-bottom: 1rpx solid #f0f0f0;*/
  transition: all 0.3s;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: #f8f9fa;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 45rpx;
  height: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.menu-icon-img {
  width: 40rpx;
  height: 40rpx;
}

.menu-text {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.bottom-placeholder {
  height: 120rpx;
}
</style>
